<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{favicon.ico}">
    <link th:href="@{/zTree_v3/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
    <style type="text/css">
        .ztree li span.button.add{margin-right:2px;background-position:-144px 0;vertical-align:top;*vertical-align:middle}
    </style>

</head>

<body class="gray-bg">
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>


<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/zTree_v3/js/jquery.ztree.core.js}"></script>
<script th:src="@{/zTree_v3/js/jquery.ztree.excheck.js}"></script>
<script th:src="@{/zTree_v3/js/jquery.ztree.exedit.js}"></script>
<script th:inline="javascript">
    var header = $("meta[name='_csrf_header']").attr("content");
    var token =$("meta[name='_csrf']").attr("content");

    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn
        },
        data: {
            key: {
                isParent: "isParent",
                children: "children",
                name: "name",
                title: "",
                url: "url",
                icon: "icon"
            },
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: null
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename
        }
    };
    var log, className = "dark";
    function beforeDrag(treeId, treeNodes) {
        return false;
    }
    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        setTimeout(function() {
            if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
                setTimeout(function() {
                    zTree.editName(treeNode);
                }, 111);
            }
        }, 111);

        return false;

    }
    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
    }
    function onRemove(e, treeId, treeNode) {
        $.post('/deleteClassify?classId='+treeNode.id);
        //showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.classifyName);
    }
    function beforeRename(treeId, treeNode, newName, isCancel) {
        className = (className === "dark" ? "":"dark");
        showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
        if (newName.length == 0) {
            setTimeout(function() {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
                alert("节点名称不能为空.");
            }, 0);
            return false;
        }
        return true;
    }
    function onRename(e, treeId, treeNode, isCancel) {
        alert(JSON.stringify(treeNode));return;
        $.ajax({
            url: '/addOrUpdateClassify?classifyName='+treeNode.name+'&classId='+treeNode.classId+'&upperRankId=0',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function(data){
            },
            beforeSend : function(xhr) {
                xhr.setRequestHeader(header, token);
            }
        });
        // $.post('/addOrUpdateClassify?classifyName='+treeNode.classifyName+'&classId='+treeNode.classId+'&upperRankId=0');
        // showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.classifyName + (isCancel ? "</span>":""));
    }
    function showRemoveBtn(treeId, treeNode) {
        return !treeNode.isFirstNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }
    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='"+className+"'>"+str+"</li>");
        if(log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds(),
            ms=now.getMilliseconds();
        return (h+":"+m+":"+s+ " " +ms);
    }

    var newCount = 1;


    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            //增加树节点
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //将新节点添加到数据库中
            //zTree.addNodes(treeNode, {classId:(100 + newCount), upperRankId:treeNode.id, classifyName:"NewNode2"}); //页面上添加节点
            // var nodes1 = zTree.getNodes();
            // zTree.editName(nodes1[0]);
            var name='NewNode';
            $.ajax({
                url: '/addOrUpdateClassify?classifyName='+name+'&upperRankId='+treeNode.classId,
                type: 'post',
                dataType: 'json',
                contentType: 'application/json',
                // data: "classifyId="+id+"",
                async: false,
                success: function(data){
                    var newID = data.data; //获取新添加的节点Id
                    zTree.addNodes(treeNode, {id:newID, parentId:treeNode.id, name:name}); //页面上添加节点
                    var node = zTree.getNodeByParam("classId", newID, null); //根据新的id找到新添加的节点
                    zTree.selectNode(node); //让新添加的节点处于选中状态
                },
                beforeSend : function(xhr) {
                    xhr.setRequestHeader(header, token);
                }
            });

            // var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //
            // zTree.addNodes(treeNode, {classId:(100 + newCount), upperRankId:treeNode.classId, classifyName:"new node" + (newCount++)});
            // return false;
        });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
    function selectAll() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
    }
    var zNodes = [[${areaList}]];
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        var zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
        var node = zTree_Menu.getNodeByParam("id",1 );
        //zTree_Menu.selectNode(node,true);//指定选中ID的节点
        zTree_Menu.expandNode(node, true, false);//指定选中ID节点展开
        $("#selectAll").bind("click", selectAll);
    });

</script>
</body>

</html>
